<template>
    <div class="product_list">
        <LoadMore @loadMore="getList" :styles="{ height: '300px' }"
        :list="productList" :pageNo="pageNo" :totalPage="totalPage" v-if="productList && productList.length > 0">
            <div slot-scope="dloadSwiper" >
                <Product
                    :key="dloadSwiper.index"
                    :description="dloadSwiper.item.description"
                    :name="dloadSwiper.item.name"
                    :oldPractice="dloadSwiper.item.price"
                    :newPractice="dloadSwiper.item.price"
                    :id="dloadSwiper.item.id"
                    :thumbnailPath="`http://www.nineunity.com${dloadSwiper.item.thumbnailPaths[0]}`"
                />
            </div>
        </LoadMore>
    </div>
</template>

<script>
  import GoodsService from '_common/services/goods.js';
  import LoadMore from '_components/loadMore/loadMore';
  import Product from '_components/product/product';
  export default {
    name: 'productList',
    props: {
    },
    data () {
      return {
        productList: [],
        pageNo: 1,
        totalPage:1,
        pageSize: 10
      }
    },
    mounted() {
    this.getList()
    },
    methods: {
      getList () {
        if (this.pageNo <= this.totalPage) {
        GoodsService.getGoodsList(this.pageNo, this.pageSize).then(res => {
            if (res && res.code === 0) {
              let data = res.data
              this.productList = this.productList.concat(data.data)
              this.totalPage = data.totalsPage
              this.pageNo++
            }
            else {
              this.$alertTip(res.msg || '获取投诉列表失败请稍后再试')
            }
          },reject => {
            this.$alertTip('获取投诉列表失败请稍后再试')
          })
        }
      }
    },
    components: {
      LoadMore,
      Product,
    }
  }
</script>
<style lang="less">
  .product_list {
    background-color: #f8f8f8;
  }

</style>